<script setup lang="ts">
import { computed } from "vue";
import ExaminationCheckbox from "./ExaminationCheckbox.vue";
import ExaminationRadio from "./ExaminationRadio.vue";
import ExaminationJudge from "./ExaminationJudge.vue";
const props = defineProps(["question", "isEdit", "questionCorrect"]);
// console.log("当前答题：", props);

const emit = defineEmits(["onChange"]);
const onChange = (res: any) => {
  emit("onChange", res);
};

// 寻找正确答案
const correctAnswer = computed(() => {
  console.log();
  let res = [];
  // console.log("正确选项", props.question.correct);
  // console.log("所有选项", props.question.results);
  if (props.question.type == "判断题") {
    if (props.question.correct.join("") == "R") {
      res = ["正确"];
    } else {
      res = ["错误"];
    }
  } else {
    for (var i = 0; i < props.question.correct.length; i++) {
      for (var j = 0; j < props.question.results.length; j++) {
        if (props.question.correct[i] == props.question.results[j].option) {
          res.push(props.question.results[j].value);
        }
      }
    }
  }
  // console.log("正确答案", res);
  return res;
});
// 你的答案
const selfAnswer = computed(() => {
  let res = [];
  const selfAns = props.question.answer ? props.question.answer : [];

  if (props.question.type == "判断题") {
    if (selfAns.join("") == "R") {
      res = ["正确"];
    } else {
      res = ["错误"];
    }
  } else {
    for (var i = 0; i < selfAns.length; i++) {
      for (var j = 0; j < props.question.results.length; j++) {
        if (selfAns[i] == props.question.results[j].option) {
          res.push(props.question.results[j].value);
        }
      }
    }
  }
  // console.log("正确选项", selfAns);
  // console.log("所有选项", props.question.results);
  // console.log("nide答案", res);
  return res;
});
</script>

<template>
  <div class="examination-questions">
    <!-- 题目 -->
    <div class="examination-title">{{ question.title }}</div>

    <!-- 选项 -->
    <div class="examination-select">
      <!-- 多选题 -->
      <ExaminationCheckbox
        v-if="question.type == '多选题'"
        :question="question"
        :isEdit="isEdit"
        @onChange="onChange"
      />

      <!-- 单选题 -->
      <ExaminationRadio
        v-else-if="question.type == '单选题'"
        :question="question"
        :isEdit="isEdit"
        @onChange="onChange"
      />

      <!-- 判断题 -->
      <ExaminationJudge
        v-else-if="question.type == '判断题'"
        :question="question"
        :isEdit="isEdit"
        @onChange="onChange"
      />
    </div>
    <div v-if="isEdit">
      <ul class="answer-title">
        <li class="answer-right">正确答案：</li>
        <li
          class="answer-item"
          v-for="(item, index) in correctAnswer"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>

      <ul class="answer-title">
        <li :class="{ 'answer-wrong': !questionCorrect }">你的答案：</li>
        <template v-if="selfAnswer.length > 0">
          <li
            class="answer-item"
            v-for="(item, index) in selfAnswer"
            :key="index"
          >
            {{ item }}
          </li>
        </template>
        <li class="answer-item" v-else>无</li>
      </ul>
      <!-- <span class="answer-yours" :class="{ 'answer-wrong': !questionCorrect }"
        >{{ question.answer || "无"
        }}{{ questionCorrect ? "" : "（错误）" }}</span
      > -->
    </div>
  </div>
</template>

<style lang="scss">
@import "@/assets/scss/global.scss";

.examination-questions {
  margin-top: 20px;

  .examination-title {
    margin-bottom: 10px;
  }
}
.examination-select-group {
  flex-direction: column;
  align-items: flex-start;
}

.answer-title {
  padding: 10px 0;
}
.answer-item {
  padding-left: 10px;
  // list-style: disc;
}

.answer-right {
  color: $color-theme;
}
.answer-wrong {
  color: $color-error;
}
</style>
